import React, { Component } from 'react';
import { NavBar, Skeleton } from 'antd-mobile'
import MySwiper from '../components/index/MySwiper';
import Text from '../components/details/Text';
import Bottom from '../components/details/Bottom';
import { GoodGoodinfo } from "../api/details"
// import {  } from 'antd-mobile-icons'

import "../styles/details/details.scss"


class Details extends Component {
    constructor() {
        super()
        this.state = {
            price: "",
            name: "",
            description: "",
            swperlist: [],
            goodsid:""
        }
    }

    async componentDidMount() {
        console.log("从全部商品页传过来的id" + this.props.location.state.id);
        var res = await GoodGoodinfo({ goodid: this.props.location.state.id })
        console.log(res.data.goodinfo);
        // -------------------------------------------------------------
        // 处理请求回来的轮播图片列表  由于传入轮播图组件的图片数据格式可能会不同,在这进行处理 将数组+字符串改成数组+对象
        // 如果有res.data.goodinfo.pics,就正常遍历,改格式
        var list = res.data.goodinfo.pics && res.data.goodinfo.pics.map((item, index) => {
            return { pic: item }
        })
        // ---------------------------------------------------------------
        this.setState({
            swperlist: list,
            price: res.data.goodinfo.salesPrice.value,
            name: res.data.goodinfo.name,
            description: res.data.goodinfo.description,
            goodsid:res.data.goodinfo.id
        })
    }


    myback() {
        console.log(this.props.history);
        this.props.history.goBack()
    }


    render() {
        return (
            <div className='details'>
                <NavBar back='返回' onBack={() => { this.myback() }}>
                    详情页
                </NavBar>
                {/* ----------------------------top----------------------------------------------- */}

                {/*  如果轮播图的请求请求回来后,this.state.swperlist存在就渲染组件,没回来不存在的话就渲染骨架屏 */}
                {this.state.swperlist && this.state.swperlist.length ?
                    <>
                        <MySwiper swperlist={this.state.swperlist}></MySwiper>
                        <Text
                            price={this.state.price}
                            name={this.state.name}
                            description={this.state.description} />
                        <Bottom goodsid={this.state.goodsid}></Bottom>
                    </>
                    :
                    <>
                        <Skeleton.Title animated />
                        <Skeleton.Paragraph lineCount={5} animated />
                    </>

                }


            </div>
        );
    }
}

export default Details;